import React, { Component } from 'react';
import { actionCreaters } from '../store'
import { ListItem, ListImg, LoadMore } from '../style';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'

class List extends Component{
  render() {
    const { listList, listPage, handleLoadMore, listTotalPage } = this.props;
    const JSlistList = listList.toJS();
    const currentListPage = listPage + 2
    return (
      <div>
        {
          JSlistList.map((item) => {
            if (item.id <= listPage) {
              return(
                <ListItem key={item.id}>
                  <ListImg src={item.imgUrl} alt=""/>
                  <Link to={"/detail/" + item.id}>{item.title}</Link>
                  <div className="content">
                    {item.content}
                  </div>
                  <span className="name">{item.name}</span>
                </ListItem>
              )
            } else {
              return null
            }
          })
        }
        {
          listPage >= listTotalPage ?
            <LoadMore bgColor="red">没有更多了</LoadMore>:
            <LoadMore onClick={() =>handleLoadMore(currentListPage)} bgColor="#a5a5a5">更多文字</LoadMore>
        }
      </div>

    )
  }
}

const mapState = (state) => {
  return {
    listList: state.getIn(['home','listList']),
    listPage: state.getIn(['home','listPage']),
    listTotalPage: state.getIn(['home','listTotalPage']),
  }
};
const mapDispatch = (dispatch) => {
  return {
    handleLoadMore(currentListPage) {
      dispatch(actionCreaters.loadMore(currentListPage))
    },
  }

}

export default connect(mapState, mapDispatch)(List);


